<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
</head>

<body>
  <div id="app">
    <h1>12</h1>
  </div>
  <script src="./dist/vue.js"></script>
  <script>
    Vue.component('button-t',{
      template:`<button>我的按钮</button>`
    })
    let vm = new Vue({
      el: "#app",
      data() {
        return {
          name:'1112',
        };
      },
      computed:{
        funName(){
          return this.name

        }
      }
    });
    setTimeout(()=> {
      vm.name = '555'
    }, 1000);
    // 更新数据 vue diff算法 最小量更新（比对） old new vnode 
    // 创建两个vnode 
    // 在比对：再数据更新的时候，拿到老的节点和新的节点做对比 将在不同的地方更新
    // console.log('[ 111 ] >', vm.funName)
    // vm.funName
    /**
     * 面试题 watch 和 computed 有什么区别
     * 1.computed有缓冲机制 通过一个变量实现 dirty 内部实现监听就是采用Object.defineProperty实现的
     * 2.watch
    */

    /**
     * vue为什么是组件开发 面试题
     * 性能高 复用 好维护  性能可以被优化 组件的更新
    */
  </script>
</body>

</html>